<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>堆叠柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>

<body>
    <div id="chartContainer" style="width: 600px; height: 400px;"></div>
    <script>
        // chart.js

        // 假设我们有三个维度的数据，分别是 A、B 和 C
        const data = [
            { name: '数据1', valueA: 10, valueB: 20, valueC: 30 },
            { name: '数据2', valueA: 15, valueB: 25, valueC: 35 },
            { name: '数据3', valueA: 20, valueB: 30, valueC: 40 }
        ];

        // 创建一个 Echarts 实例
        const chart = echarts.init(document.getElementById('chartContainer'));

        // 设置图表的配置项
        const option = {
            // 设置图表的标题
            title: {
                text: '堆叠柱状图示例'
            },
            // 设置图表的提示框组件
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            // 设置图表的图例组件
            legend: {
                data: ['A', 'B', 'C']
            },
            // 设置图表的 x 轴配置
            xAxis: {
                type: 'category',
                data: data.map(item => item.name)
            },
            // 设置图表的 y 轴配置
            yAxis: {
                type: 'value'
            },
            // 设置图表的系列（数据列）
            series: [
                {
                    name: 'A',
                    type: 'bar',
                    stack: 'total',
                    data: data.map(item => item.valueA)
                },
                {
                    name: 'B',
                    type: 'bar',
                    stack: 'total',
                    data: data.map(item => item.valueB)
                },
                {
                    name: 'C',
                    type: 'bar',
                    stack: 'total',
                    data: data.map(item => item.valueC)
                }
            ]
        };

        // 渲染图表
        chart.setOption(option);

        // 在图表顶部显示总数值
        const totalValues = data.map(item => item.valueA + item.valueB + item.valueC);
        const totalLabelStyle = {
            color: '#000',
            fontSize: 14,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'middle',
            position: 'top'
        };

        chart.setOption({
            graphic: data.map((item, index) => ({
                type: 'text',
                left: chart.convertToPixel('grid', index),
                top: chart.convertToPixel('grid', totalValues[index]),
                style: totalLabelStyle,
                z: 100,
                silent: true,
                text: totalValues[index].toString()
            }))
        });

    </script>
</body>

</html>